---
import HeaderLink from "./HeaderLink.vue";
import { fillSlash } from "../utils";
import MobileMenu from "./MobileMenu.vue";

interface Props {
  title: string;
  navbar: NavbarItem[];
}
const { title, navbar } = Astro.props;
---

<div id="navbar" class="fixed left-0 top-0 z-2 bg-white w-full b-b-1 b-gray-100">
  <div
    class="container m-auto flex justify-between items-center h-80px"
    lt-xl="hidden"
  >
    <a href="/" class="font-600 text-20px">
      {title}
      <span class="scroll-text"></span>
    </a>
    <div class="flex text-15px">
      {
        navbar.map((item) => (
          <div class="px-20px py-20px">
            <HeaderLink
              href={
                fillSlash(item.path === "/addtemp" ? `${item.path}/${item.id}` : item.path)
              }
              client:load
            >
              {item.name}
            </HeaderLink>
          </div>
        ))
      }
    </div>
  </div>
  <script>
    let isTop = true;
    window.addEventListener("scroll", function () {
      const el = document.getElementById("navbar") as HTMLElement ;
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      if (scrollTop > 100) {
        if (isTop) {
          el.classList.add("showAnimation");
          isTop = false;
        }
      } else {
        el.classList.remove("showAnimation");
        isTop = true;
      }
    });
  </script>
  <MobileMenu client:load title={title} navbar={navbar} />
</div>

<style>
  .none {
    display: none;
  }
  .showAnimation {
    animation: showNav 0.3s linear forwards;
  }
  .removeAnimation {
    animation: removeNav 0.3s linear forwards;
  }
  @keyframes showNav {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes removeNav {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }
</style>
